<template>
  <div class="echarts-contain">
    <div class="contain-left">
      <div>
        <div class="item">1111111</div>
        <div class="item">1111111</div>
        <div class="item">1111111</div>
        <div class="item">1111111</div>
        <div class="item">1111111</div>
        <div class="item">1111111</div>
      </div>
      
    </div>
    <div id="barEcharts" style="height: 465px; width: calc(100% - 50px)"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      myCharts: null,
      // X轴
      dataX: ['到店客流', 'ETC发行套装', '系统业务', '线上业务', '大厅咨询', '话务接听', '激活车次', '后台审核', '店内营销', '投诉及其他']
    }
  },
  mounted() {
    this.init()
    window.addEventListener("resize", this.resize);
  },
  watch: {},
  methods: {
    init() {
      var chartDom = document.getElementById('barEcharts');
      this.myCharts = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '客服中心各月相关数据对比',
          left: '20'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 'bottom'
        },
        grid: {
          top: '8%',
          left: '2%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: true, // 当图标超出X轴到负半轴时设置为true可解决
        },
        yAxis: {
          type: 'category',
          data: this.dataX
        },
        series: [
          {
            name: '一月',
            type: 'bar',
            barGap: '0%', // 一个坐标下的柱子紧挨着没间隙
            data: [18203, 23489, 29034, 104970, 131744, 630230, 999, 800, 6666, 87443]
          },
          {
            name: '二月',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807, 29034, 104970, 131744, 630230,]
          }
        ]
      };
      option && this.myCharts.setOption(option);
    },
    // 页面缩放
    resize() {
      this.myCharts.resize();
    },
  },
  beforeDestroy() {
    if(!this.myCharts){
      return
    }
    window.removeEventListener("resize", this.resize);
    this.myCharts.dispose();
  },
}
</script>

<style lang="scss" scoped>
.echarts-contain{
  width: 100%;
  display: flex;
}
.contain-left{
  width: 50px;
  margin-top: 38px
}
.item{
  line-height: 36px
}
</style>